<template>
  <el-header>
    <!--Header左侧-->
    <div class="logo_box">
      <img :src="require('@/assets/img/logo.png')" alt="">
      <span>智慧中专教育系统</span>
    </div>
    <!--Header右侧-->
    <el-dropdown>
      <span class="el-dropdown-link">
        <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
        <span>
          {{ username }}<i class="el-icon-arrow-down el-icon--right"></i>
        </span>
      </span>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item @click.native="personInfo">基本信息</el-dropdown-item>
        <el-dropdown-item @click.native="changePassword">修改密码</el-dropdown-item>
        <el-dropdown-item @click.native="logout" divided>退出登录</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </el-header>
</template>

<script>
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "Header",
  data(){
    return{
      username:JSON.parse(sessionStorage.getItem("user")).name,
    }
  },
  methods:{
    logout(){
      this.$confirm('确定要退出登录吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      }).then(() => {
        sessionStorage.removeItem('user');
        this.$router.push("/login");
        this.$message.success("退出登录成功");
      })
    },
    personInfo(){
      this.$router.push("/personInfo");
    },
    changePassword(){
      this.$router.push("/changePassword");
    }
  }
}
</script>

<style lang="less" scoped>
.el-header{
  border-bottom: 1px solid #dddddd;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 0;
  .logo_box{
    display: flex;
    align-items: center;
    img{
      height: 50px;
      width: 50px;
    }
    span{
      margin-left: 15px;
      font-weight: bold;
    }
  }
}

.el-dropdown{
  cursor: pointer;
}
</style>
